<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>查看申报书</title>
@include('common-css')
<style>
b {
    font-weight: bold;
}

.text-left {
    text-align: left !important;
}

.app-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

header {

}

main {
    flex: 1;
    font-family: serif;
    overflow-y: auto;
    color: #000;
    line-height: 30px;
}

main h2,
main h3,
main h4 {
    color: #0050b0;
    font-weight: bold;
}

main > section {
    width: 800px;
    margin: 0 auto;
    margin-top: 50px;
}

main > section > h3 {
    font-size: 20px;
    text-align: center;
    font-weight: bold;
}

.section-title-remarks {
    font-size: 14px;
    color: #444;
    text-align: center;
}

.simple-text-table {
    width: 100%;
    margin-top: 20px;
    font-size: 14px;
}

.simple-text-table td {
    padding: 5px 10px;
    border: 1px solid black;
    text-indent: 2em;
    vertical-align: middle;
}

.section-0 h2 {
    text-align: center;
    font-size: 30px;
    line-height: 50px;
}

.section-0 > table {
    width: 550px;
    margin: 0 auto;
    margin-top: 60px;
    font-size: 18px;
    line-height: 30px;
}

.section-0 > table td {
    padding: 10px;
    border: 1px solid black;
}

.section-0 .copyright {
    font-size: 18px;
    margin-top: 60px;
    text-align: center;
}

.section-1 > table {
    width: 100%;
    margin-top: 20px;
    font-size: 14px;
}

.section-1 > table td {
    padding: 5px 10px;
    border: 1px solid black;
    text-align: center;
    vertical-align: middle;
}

.section-2 > table,
.section-3 > table,
.section-4 > table,
.section-5 > table,
.section-6 > table {
    width: 100%;
    font-size: 14px;
    margin-top: 20px;
}

.section-2 > table td,
.section-3 > table td,
.section-4 > table td,
.section-5 > table td,
.section-6 > table td {
    padding: 3px 5px;
    border: 1px solid black;
    vertical-align: middle;
    text-align: center;
    line-height: 20px;
}

.section-7 {
    margin-bottom: 50px;
}

</style>
</head>
<body>

<div id="app"></div>

<script id="appTemplate" type="x-template">
<div class="app-container">

    <header class="special">
        <div class="left_info">
            <h1>科技创新人物奖申报书</h1>
        </div>
    </header>

    <main>

        <section v-if="true" class="section-0">

            <h2>
                中国公路建设行业协会科学技术奖
                <br>
                科学技术创新人物奖申报书
            </h2>

            <table>
                <tr>
                    <td width="130">人选姓名：</td>
                    <td>@{{ formData.basic.name }}</td>
                </tr>
                <tr>
                    <td>工作单位：</td>
                    <td>@{{ formData.basic.company }}</td>
                </tr>
            </table>

            <p class="copyright">中国公路建设行业协会科学技术奖办公室制</p>

        </section>

        <section v-if="true" class="section-1">

            <h3>一、基本情况</h3>

            <table>
                <tr>
                    <td width="12%" colspan="2">姓　　名</td>
                    <td width="12%">@{{ formData.basic.name }}</td>
                    <td width="8%">性别</td>
                    <td width="10%">@{{ formData.basic.sex }}</td>
                    <td width="8%">民族</td>
                    <td width="15%">@{{ formData.basic.nation }}</td>
                    <td width="20%" rowspan="6" style="vertical-align: middle;"><img :src="formData.basic.document_photo" width="150"></td>
                </tr>
                <tr>
                    <td colspan="2">学　　历</td>
                    <td>@{{ formData.basic.eduction }}</td>
                    <td>学位</td>
                    <td>@{{ formData.basic.degree }}</td>
                    <td>党派</td>
                    <td>@{{ formData.basic.groups }}</td>
                </tr>
                <tr>
                    <td colspan="2">出生日期</td>
                    <td colspan="2">@{{ formData.basic.birth }}</td>
                    <td>行政职务</td>
                    <td colspan="2">@{{ formData.basic.duty }}</td>
                </tr>
                <tr>
                    <td colspan="2">专业技术职务</td>
                    <td colspan="2">@{{ formData.basic.professional }}</td>
                    <td>手机号码</td>
                    <td colspan="2">@{{ formData.basic.phone }}</td>
                </tr>
                <tr>
                    <td colspan="2">毕业时间</td>
                    <td colspan="2">@{{ formData.basic.graduate }}</td>
                    <td>单位电话</td>
                    <td colspan="2">@{{ formData.basic.company_phone }}</td>
                </tr>
                <tr>
                    <td colspan="2">E-mail</td>
                    <td colspan="5">@{{ formData.basic.mail }}</td>
                </tr>
                <tr>
                    <td colspan="2">工作单位全称</td>
                    <td colspan="6">@{{ formData.basic.company }}</td>
                </tr>
                <tr>
                    <td colspan="2">单位地址及邮编</td>
                    <td colspan="5">@{{ formData.basic.company_address }}</td>
                    <td>@{{ formData.basic.company_email }}</td>
                </tr>
                <tr>
                    <td colspan="2">社会职务</td>
                    <td style="text-align: left; padding-left: 20px;" colspan="7" v-html="text2Html(formData.basic.job)"></td>
                </tr>
                <tr>
                    <td colspan="2">国内外学术组织<br>任职情况</td>
                    <td colspan="7">@{{ formData.basic.situation }}</td>
                </tr>
                <tr v-for="(record, index) in formData.basic.resume" :key="index">
                    <td v-if="index == 0" width="3%" :rowspan="formData.basic.resume.length">本<br>人<br>简<br>历</td>
                    <td colspan="2">@{{ record.range }}</td>
                    <td colspan="3">@{{ record.address }}</td>
                    <td colspan="3">@{{ record.experience }}</td>
                </tr>
            </table>

        </section>

        <section v-if="true" class="section-2">

            <h3 id="c2_shkjjlhrychqk">二、所获科技奖励和荣誉称号情况</h3>

            <table>
                <tr>
                    <td width="30%">奖励或荣誉名称</td>
                    <td width="25%">授奖单位</td>
                    <td width="20%">授奖日期</td>
                    <td width="15%">获奖总人数</td>
                    <td width="10%">本人排名</td>
                </tr>
                <tr v-for="(record, index) in formData.award" :key="index">
                    <td>@{{ record.award_name }}</td>
                    <td>@{{ record.company_of_issue }}</td>
                    <td>@{{ record.date }}</td>
                    <td>@{{ record.total }}</td>
                    <td>@{{ record.rank }}</td>
                </tr>
            </table>

        </section>

        <section v-if="true" class="section-3">

            <h3 id="c3_fblwhzzqk">三、发表论文和专著情况</h3>

            <table>
                <tr>
                    <td width="20%">论文/著作名称</td>
                    <td width="5%">年份</td>
                    <td width="10%">本人排名</td>
                    <td width="15%">主要合作者</td>
                    <td width="20%">发表刊物或<br>出版社名称</td>
                    <td width="30%">本人作用或<br>主要贡献</td>
                </tr>
                <tr v-for="(record, index) in formData.paper" :key="index">
                    <td>@{{ record.paper_name }}</td>
                    <td>@{{ record.date }}</td>
                    <td>@{{ record.rank }}</td>
                    <td>@{{ record.partner }}</td>
                    <td>@{{ record.publish }}</td>
                    <td>@{{ record.contribution }}</td>
                </tr>
            </table>

        </section>

        <section v-if="true" class="section-4">

            <h3 id="c4_shzscqzs">四、所获知识产权证书</h3>

            <table>
                <tr>
                    <td width="10%">知识产权<br>类别</td>
                    <td width="10%">授权项目<br>名称</td>
                    <td width="10%">国（区）别</td>
                    <td width="10%">授权号</td>
                    <td width="10%">授权日期</td>
                    <td width="10%">证书编号</td>
                    <td width="10%">权利人</td>
                    <td width="10%">发明人</td>
                    <td width="10%">所对应标志性成果</td>
                    <td width="10%">证明材料编号</td>
                </tr>
                <tr v-for="(record, index) in formData.property" :key="index">
                    <td>@{{ record.property_category }}</td>
                    <td>@{{ record.item_name }}</td>
                    <td>@{{ record.country }}</td>
                    <td>@{{ record.authorization_num }}</td>
                    <td>@{{ record.authorization_date }}</td>
                    <td>@{{ record.certificate_number }}</td>
                    <td>@{{ record.obligee }}</td>
                    <td>@{{ record.inventor }}</td>
                    <td>@{{ record.achievement }}</td>
                    <td>@{{ record.reference_number }}</td>
                </tr>
            </table>

        </section>


        <section v-if="true" class="section-5">

            <h3 id="c5_cdkyxmqk">五、承担科研项目情况</h3>

            <table>
                <tr>
                    <td width="20%">项目名称</td>
                    <td width="10%">研发经费<br>（万元）</td>
                    <td width="10%">项目来源</td>
                    <td width="10%">项目编号</td>
                    <td width="10%">研发起止<br>时间</td>
                    <td width="10%">状态</td>
                    <td width="10%">负责人</td>
                    <td width="10%">本人在<br>项目成果<br>中排序</td>
                    <td width="10%">证明材料<br>编号</td>
                </tr>
                <tr v-for="(record, index) in formData.scientific" :key="index">
                    <td>@{{ record.project_name }}</td>
                    <td>@{{ record.expenditure }}</td>
                    <td>@{{ record.project_origin }}</td>
                    <td>@{{ record.project_number }}</td>
                    <td>@{{ record.development_date }}</td>
                    <td>@{{ record.status }}</td>
                    <td>@{{ record.principal }}</td>
                    <td>@{{ record.sort }}</td>
                    <td>@{{ record.reference_number }}</td>
                </tr>
            </table>

        </section>

        <section v-if="true" class="section-6">

            <h3 id="c6_cyzdgcjsxmqk">六、参与重大工程技术项目情况</h3>

            <table>
                <tr>
                    <td width="20%">项目名称</td>
                    <td width="20%">项目委托单位</td>
                    <td width="50%">本人参与情况</td>
                    <td width="10%">经济效益（万元）</td>
                </tr>
                <tr v-for="(record, index) in formData.engineering" :key="index">
                    <td>@{{ record.project_name }}</td>
                    <td>@{{ record.issue_company }}</td>
                    <td>@{{ record.aboutme }}</td>
                    <td>@{{ record.economic }}</td>
                </tr>
            </table>

        </section>

        <section v-if="true" class="section-7">

            <h3 id="c7_kjcgzhjtgqk">七、科技成果转化及推广情况</h3>

            <table class="simple-text-table">
                <tr>
                    <td v-html="text2Html(formData.situation)"></td>
                </tr>
            </table>

        </section>

    </main>

</div>
</script>

@include('common-js')

<script>
var formData = {!! json_encode($formData, JSON_UNESCAPED_UNICODE) !!};
</script>

<script>
var app = new Vue({
    el: '#app',
    template: '#appTemplate',
    data: {
        formData,
    },
    mounted() {
    },
    methods: {
        tryParseNumber(str) {
            var value = parseFloat(str);
            return isNaN(value) ? 0 : value
        },
        text2Html(text) {
            var html = '<p>' + text.replace(/\n/g, '</p><p>') + '</p>';
            return html
        },
    }
})
</script>

</body>
</html>